<template>
	<view>
		<view class="Wallet-navigation-background"></view>
		<view class="Wallet-frame">
			<text class="Wallet-frame-tit">我的薯币</text>
			<view class="Recharge-box">
				<view class="Recharge-box-Potato-coin-box">
					<i class="Potato-coin-icon"></i>
					<text class="Potato-coin-value">0</text>
				</view>
				<view class="Recharge-box-Potato-coin-box-tit-box">
					<text class="Recharge-box-Potato-coin-box-tit" @click="Recharge">充值</text>
				</view>
			</view>
		</view>
		<text class="My-earnings">我的收益</text>
		<view class="My-earnings-content-backgroung-box">
			<view class="My-earnings-content-box-01">
				<view class="Content-collaboration-benefits-box-01" @click="Contentcollaboration">
					<text class="Content-collaboration-benefits-01">内容合作收益</text>
					<text class="Content-collaboration-benefits-02">0.00</text>
				</view>
				<text class="Content-collaboration-benefits-box-02">
					<text class="Content-collaboration-benefits-Withdrawal">提现 ></text>
				</text>
			</view>
			<view class="My-earnings-content-box-02">
				<view class="Content-collaboration-benefits-box-01">
					<text class="Content-collaboration-benefits-01">带货合作收益</text>
					<text class="Content-collaboration-benefits-02">0.00</text>
				</view>
				<text class="Content-collaboration-benefits-box-02">
					<text class="Content-collaboration-benefits-Withdrawal">提现 ></text>
				</text>
			</view>
			<view class="My-earnings-content-box-03">
				<view class="Content-collaboration-benefits-box-01" @click="xianjinhongbao">
					<text class="Content-collaboration-benefits-01">现金红包</text>
					<text class="Content-collaboration-benefits-02">0.00</text>
				</view>
				<text class="Content-collaboration-benefits-box-02">
					<text class="Content-collaboration-benefits-Withdrawal">提现 ></text>
				</text>
			</view>
		</view>
		<text class="My-earnings">其他服务</text>
		<view class="Other-services">
			<ul>
				<li @click="bill">
					<i class="Potato-coin-bill-icon"></i>
					<text class="Potato-coin-bill-tit" >薯币账单</text>
				</li>
				<li>
					<i class="Gift-Record-icon" @click="GiftRecordicon"></i>
					<text class="Potato-coin-bill-tit">礼物记录</text>
				</li>
				<li>
					<i class="Live-class-records-icon"></i>
					<text class="Potato-coin-bill-tit">直播课记录</text>
				</li>
				<li @click="yuE">
					<i class="Potato-coin-bill-icon"></i>
					<text class="Potato-coin-bill-tit" >支入支出记录</text>
				</li>
			</ul>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			Recharge(){
				uni.navigateTo({
					url:"/pages/wallet/Recharge"
				})
			},
			bill(){
				uni.navigateTo({
					url:"/pages/wallet/coinbill"
				})
			},
			yuE(){
			    uni.navigateTo({
			    	url:"/pages/wallet/ChangeInBalance"
			    })	
			},
			xianjinhongbao(){
				uni.navigateTo({
					url:"/pages/shoppingCar/xianjinhongbao"
				})
			},
			Contentcollaboration(){
				uni.navigateTo({
					url:"/pages/wallet/Contentcollaboration"
				})
			},
			GiftRecordicon(){
				uni.navigateTo({
					url:"/pages/wallet/GiftRecord"
				})
			}
			
		}
	}
</script>

<style>
	.Wallet-navigation-background {
		width: 100%;
		height: 200rpx;
		background-color: #ff2442;
		border-radius: 30rpx;
		margin-top: -60rpx;
	}

	.Wallet-frame {
		width: 720rpx;
		height: 200rpx;
		background-image: linear-gradient(rgba(252, 226, 229), white);
		margin:auto;
		margin-top: -120rpx;
		border-radius: 20rpx;
		border: 1px solid rgba(252, 226, 229);
		box-shadow: 5rpx 5rpx 2rpx gainsboro;
	}
	.Wallet-frame-tit {
		display: block;
		font-size: 22rpx;
		letter-spacing: 4rpx;
		margin: 30rpx 30rpx;
	}

	.Recharge-box {
		width: 100%;
		height: 70rpx;
		display: flex;
		justify-content: space-between;
	}

	.Recharge-box .Recharge-box-Potato-coin-box {
		width: 100rpx;
		height: 70rpx;
		margin-left: 25rpx;
		display: flex;
		justify-content: space-between;
	}

	.Recharge-box .Recharge-box-Potato-coin-box-tit-box {
		width: 150rpx;
		height: 50rpx;
		background-color: #ff2442;
		border-radius: 70rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.Recharge-box-Potato-coin-box-tit {
		font-size: 30 .rpx;
		display: block;
		color: white;
		text-align: center;
		line-height: 50rpx;
	}

	.Potato-coin-icon,.Gift-Record{
		display: block;
		width: 50rpx;
		height: 50rpx;
		margin-top: 10rpx;
		background-image: url("../../static/icon/Potato-coins.png");
		background-repeat: no-repeat;
		background-size: cover;
	}

	.Potato-coin-value {
		display: block;
		font-size: 55rpx;
		line-height: 70rpx;
	}
	.My-earnings{
		display: block;
		margin-left: 50rpx;
		margin-top: 30rpx;
		letter-spacing: 5rpx;
	}
	.My-earnings-content-backgroung-box{
		width: 650rpx;
		height: 270rpx;
		margin: auto;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	.My-earnings-content-box-01,.My-earnings-content-box-02,.My-earnings-content-box-03{
		width: 320rpx;
		height: 125rpx;
		background-color: #fafafa;
		flex-shrink: 0;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
	}
	.Content-collaboration-benefits-box-01{
		width: 140rpx;
		height: 90rpx;
		margin-top: 15rpx;
		margin-left: 20rpx;
	}
	.Content-collaboration-benefits-box-02{
		display: inline-block;
		width: 100rpx;
		height: 90rpx;
		margin-top: 15rpx;
		margin-right: 20rpx;
	}
	.Content-collaboration-benefits-01{
		color: grey;
		font-size: 23rpx;
	}
	.Content-collaboration-benefits-02{
		display: block;
		margin-top: 15rpx;
	}
	.Content-collaboration-benefits-Withdrawal{
		font-size: 30rpx;
		line-height: 90rpx;
		color: red;
	}
	/* 其他服务 */
	.Other-services{
		width: 600rpx;
		height: 120rpx;
		margin-top: 30rpx;
	}
	.Other-services ul{
		list-style: none;
		display: flex;
	}
	.Other-services ul li{
		width: 120rpx;
		height: 100rpx;
		margin-left: 10rpx;
	}
	.Other-services ul li i{
		display: block;
		width: 55rpx;
		height: 55rpx;
		margin: auto;
		background-repeat: no-repeat;
		background-size: cover;
	}
	.Potato-coin-bill-icon{
		background-image: url("../../static/icon/Statement of account.png");
	}
	.Gift-Record-icon{
		background-image: url("../../static/icon/gift.png");
	}
	.Live-class-records-icon{
		background-image: url("../../static/icon/direct.png");
	}
	.Potato-coin-bill-tit{
		display: block;
		font-size: 22rpx;
		text-align: center;
		margin-top: 10rpx;
		color: gray;
		letter-spacing: 3rpx;
		
	}
</style>